<template>
  <div style="background-color: rgba(217,203,184,0.27)">
    <sg-nav></sg-nav>
  <div>
    <el-row>
    <el-col :sm="24" :md="13" style="transition:all .5s ease-out;margin-bottom:30px;">
  <el-row class="baikeDetailBox">
    <el-col :span="24" class="s-item tcommonBox" v-for="diary in plantDiaryList ":key="'diary'+diary.id">
      <header>
        <h1>
          {{diary.title}}
        </h1>
        <h2>{{diary.createTime}} • {{diary.weather}}</h2>
        <h3> {{diary.likeCount}} 次点赞 •</h3>
        <img v-if="diary.picture" :src="diary.picture" alt="" width="400"height="350">
      </header>
      <div class="article-content markdown-body" v-html="diary.content"></div>
      <el-button
          class="el-icon-edit"
          type="text"
          size="medium"
          plain
          @click="$refs.writeDiaryDialog.open(null,diary,1)"
      >编辑日记</el-button>
    </el-col>
  </el-row>
    </el-col>
    <el-col :sm="8"  :md="6" >
      <sg-rightList></sg-rightList>
    </el-col>
    </el-row>
  </div>
    <write-diary-dialog ref="writeDiaryDialog" title="编辑日记"  @confirmData="(plantDiary1,fileList) => updatePlantDiary(plantDiary1)"></write-diary-dialog>
  </div>
</template>

<script>
import writeDiaryDialog from "@/components/page/my/WriteDiary";
import Header from "@/components/common/Header";
import {getDiary, getDiaryByPlantId, updateDiary} from "@/api/diary";
import {updateViewCount} from "@/api/article";
import rightList from "@/components/common/RightList";
export default {
  name: "CheckMyDiary",
  components:{
    writeDiaryDialog,
    'sg-nav':Header,
    'sg-rightList':rightList,
  },
  data(){
    return{
      visible:false,
      //diaryList:[],
      pid:'',
      plantDiary:{
        id:'',
        plantId:'',
        weather:'',
        state:'',
        content:'',
        picture:'',
        isComment:'',
        likeCount:'',
        createBy:'',
        createTime:'',
        updateBy:'',
        updateTime:'',
        title:'',

      },
      plantDiaryList:[],
      searchPlant:{
        plantId: ''
      }
    }
  },

  mounted(){
    // var anchor = document.querySelector("#detail");
    // // console.log(anchor,anchor.offsetTop);
    // var top = anchor.offsetTop-60;
    // document.body.scrollTop = top;
    // // Firefox
    // document.documentElement.scrollTop = top;
    // // Safari
    // window.pageYOffset = top;
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    '$route':'routeChange'
  },
  created() { //生命周期函数
    console.log("helloplantdiary!!")
    var that = this;

    this.routeChange();
  },
  methods:{
    updatePlantDiary(plantDiary){
      console.log("updateDiary!!!!",plantDiary)
      updateDiary(plantDiary).then(res=>{
        this.getHistoryDiary(this.pid)
      })
    },
    getHistoryDiary(plant_id){
      //this.searchPlant.plantId=plant_id
      //console.log(this.searchPlant)
      this.searchPlant.plantId=plant_id
      console.log("plant_id:",plant_id)
      getDiaryByPlantId(plant_id).then(res=>{
        console.log(res)
        this.plantDiaryList=res
      })
      // getDiary(this.searchPlant).then(res=>{
      //   this.plantDiaryList=res.records
      //   console.log(res.records)
      //   console.log(this.plantDiaryList)
      // })
    },
    routeChange:function(){
      console.log("checkdiary:",this.$route.query.pid)
      var that = this;
      that.pid = that.$route.query.pid==undefined?0:parseInt(that.$route.query.pid);//获取传参的aid
      //判断用户是否存在
      if(localStorage.getItem('userInfo')){
        that.haslogin = true;
        that.userInfo = JSON.parse(localStorage.getItem('userInfo'));
        that.userId = that.userInfo.userId;
        // console.log(that.userInfo);
      }else{
        that.haslogin = false;
      }
      //获取详情接口
      console.log("that:pid",this.pid)
      this.getHistoryDiary(that.pid)
      //console.log("nduihduebhbxcz")
    }
    // open(list){
    //   console.log("openDIary")
    //   this.visible=true
    //   this.diaryList=list
    // }
  }
}
</script>

<style scoped>

</style>